<form (ngSubmit)="saveNamespace()" autocomplete="off" #nsForm="ngForm">

  <h2 mat-dialog-title>
    {{isNew ? '新增命名空间' : '编辑命名空间'}}
    <a class="title-key" matTooltip="点击复制密码到剪贴板" pCopy [copyText]="namespace.auth_passwd" matTooltipPosition="above">
      <mat-icon>vpn_key</mat-icon>
    </a>
  </h2>
  <mat-dialog-content>
    <mat-form-field>
      <input matInput type="text" placeholder="命名空间" [(ngModel)]="namespace.key" name="ns-key" required
        [readonly]="!isNew" [disabled]="!isNew" (blur)="nsKeyChange(namespace.key)">
      <mat-error>必填</mat-error>
      <mat-hint>必须是字母或数字</mat-hint>
    </mat-form-field>

    <mat-form-field>
      <input matInput type="text" placeholder="名称" [(ngModel)]="namespace.name" name="ns-name" required>
      <mat-error>必填</mat-error>
    </mat-form-field>

    <mat-form-field>
      <input matInput type="password" placeholder="密码" [(ngModel)]="namespace.auth_passwd" name="ns-auth_passwd"
        required>
      <mat-error>必填</mat-error>
    </mat-form-field>

    <mat-form-field>
      <input matInput type="text" placeholder="下线回调接口" [(ngModel)]="namespace.disconnect_callback"
        name="ns-disconnect_callback">
    </mat-form-field>

    <mat-form-field>
      <input matInput type="text" placeholder="上线回调接口" [(ngModel)]="namespace.connect_callback"
        name="ns-connect_callback">
    </mat-form-field>

    <div class="apns-item" *ngFor="let apns of namespace.apns_list">
      <mat-form-field>
        <input matInput type="text" placeholder="apns名称" [(ngModel)]="apns.name" name="apns-name" required
          [disabled]="!apns.isNew">
        <button type="button" mat-button matSuffix *ngIf="!apns.isNew" (click)="toggleDel(apns)" class="apns-del-btn"
          [class.del]="apns.del" color="warn">删除apns</button>
        <mat-error>必填</mat-error>
      </mat-form-field>

      <mat-radio-group [value]="apns.apns_env" (change)="apns.apns_env = $event.value">
        <mat-radio-button [value]="'production'">生产环境证书</mat-radio-button>
        <mat-radio-button [value]="'dev'">测试环境证书</mat-radio-button>
      </mat-radio-group>
      <mat-form-field>
        <textarea matInput placeholder="测试证书cert" [(ngModel)]="apns.apns_dev_cert" name="apns-apns_dev_cert"></textarea>
      </mat-form-field>

      <mat-form-field>
        <textarea matInput placeholder="测试证书key" [(ngModel)]="apns.apns_dev_key" name="apns-apns_dev_key"></textarea>
      </mat-form-field>

      <mat-form-field>
        <textarea matInput placeholder="生产证书cert" [(ngModel)]="apns.apns_production_cert"
          name="apns-apns_production_cert"></textarea>
      </mat-form-field>

      <mat-form-field>
        <textarea matInput placeholder="生产证书key" [(ngModel)]="apns.apns_production_key"
          name="apns-apns_production_key"></textarea>
      </mat-form-field>
    </div>

  </mat-dialog-content>
  <div class="clearfix action">
    <button type="submit" class="pull-right" mat-raised-button color="accent"
      [disabled]="nsForm.form.invalid">保存</button>
    <button type="button" class="pull-right" (click)="addApns()" mat-raised-button color="accent">新增apns证书</button>
    <button type="button" class="pull-right" mat-dialog-close mat-raised-button>取消</button>
  </div>
</form>
